<template>
  <!-- 首页 -->
  <view>
    <NavigationBar ref="navbar" :backgroundColor="navbarBackground" />
    <view class="background"></view>
    <!-- 横幅区域 -->
    <view class="bannerContainer" :style="{ marginTop: navbarHeight }">
      <!-- 搜索框 -->
      <view class="searchContainer">
        <image
          src="/static/icon/search.png"
          mode="aspectFit"
          :lazy-load="true"
        ></image>
        <input
          type="text"
          placeholder="商品搜索"
          placeholder-style="color: #f8f8f8; font-size: 26rpx"
          cursor-color="#fff"
        />
      </view>
      <!-- 轮播图 -->
      <view class="swiperContainer">
        <swiper
          class="swiper"
          circular
          :indicator-dots="true"
          :autoplay="true"
          :interval="3000"
          :duration="500"
          indicator-color="rgba(255, 255, 255, .5)"
          indicator-active-color="#fff"
        >
          <swiper-item v-for="item in imgList" :key="item">
            <image :src="item" mode="aspectFit"></image>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <!-- 活动区 -->
    <view class="activityZone">
      <view
        class="activeItem"
        v-for="item in activityZoneData"
        :key="item.title"
      >
        <image :src="item.icon" mode="aspectFit"></image>
        <text>{{ item.title }}</text>
      </view>
      <!-- 活动横幅 -->
      <view class="activeBanner">
        <image src="/static/index/社区包租婆.png" mode="aspectFill"></image>
      </view>
    </view>
    <!-- 秒杀专区 -->
    <view class="secondKillZone">
      <!-- 标题部分 -->
      <view class="skTitle">
        <text>秒杀专区</text>
        <!-- 倒计时 -->
        <view class="countdown">
          <view>
            <text class="h">{{ countdown.h }}</text>
          </view>
          <text class="separation">:</text>
          <view>
            <text class="m">{{ countdown.m }}</text>
          </view>
          <text class="separation">:</text>
          <view>
            <text class="s">{{ countdown.s }}</text>
          </view>
        </view>
      </view>
      <!-- 秒杀商品 -->
      <view class="instantGoods">
        <!-- 商品封面 -->
        <view class="goodsCover">
          <view class="container">
            <image src="/static/index/柚子.png" mode="aspectFit"></image>
            <view class="desc">
              <text>12.26好物年货节</text>
            </view>
          </view>
        </view>
        <view class="rightContent">
          <!-- 商品名称 -->
          <view class="goodsName">
            <text>广西优质蜜柚1000g/份</text>
          </view>
          <!-- 商品数量 -->
          <view class="goodsNumber">
            <text>限量200件</text>
          </view>
          <!-- 商品特权 -->
          <view class="commodityPrivilege">
            <view>包邮</view>
            <view>包送货</view>
          </view>
          <!-- 购买 -->
          <view class="buy">
            <view class="price">
              <text class="currentPrice">￥2.99</text>
              <text class="originalPrice">30.00</text>
            </view>
            <view class="buyButton">
              <button>立即购买</button>
            </view>
          </view>
        </view>
      </view>
      <!-- 查看更多 -->
      <view class="more">
        <text>查看更多秒杀商品</text>
      </view>
    </view>
    <!-- 商品列表 -->
    <view class="goodsList">
      <GoodsCard
        v-for="item in goodsList"
        :key="item.id"
        :goodsInfo="item"
        @addShoppingCart="handleAddShoppingCart"
      />
      <view class="loading">
        <text>{{ loadingText }}</text>
      </view>
    </view>
    <BackTop :isShow="showBackTop" />
  </view>
</template>

<script>
import NavigationBar from "../../components/NavigationBar.vue";
import GoodsCard from "../../components/GoodsCard.vue";
import BackTop from "../../components/BackTop.vue";
export default {
  components: {
    NavigationBar,
    GoodsCard,
    BackTop,
  },
  data() {
    return {
      showBackTop: false, // 显示返回顶部
      goodsNumber: 10,
      countdown: {
        // 倒计时
        h: "00",
        m: "00",
        s: "00",
      },
      goodsList: [
        // 商品列表
        {
          id: 1,
          imgUrl: "/static/goods/山竹.png",
          name: "泰国进口山竹5A级",
          tag: "果汁饱满 汁水充盈",
          price: 25.3,
          unit: "斤",
        },
        {
          id: 2,
          imgUrl: "/static/goods/山竹.png",
          name: "泰国进口山竹5A级",
          tag: "果汁饱满 汁水充盈",
          price: 25.3,
          unit: "斤",
        },
        {
          id: 3,
          imgUrl: "/static/goods/山竹.png",
          name: "泰国进口山竹5A级",
          tag: "果汁饱满 汁水充盈",
          price: 25.3,
          unit: "斤",
        },
        {
          id: 4,
          imgUrl: "/static/goods/山竹.png",
          name: "泰国进口山竹5A级",
          tag: "果汁饱满 汁水充盈",
          price: 25.3,
          unit: "斤",
        },
        {
          id: 5,
          imgUrl: "/static/goods/山竹.png",
          name: "泰国进口山竹5A级",
          tag: "果汁饱满 汁水充盈",
          price: 25.3,
          unit: "斤",
        },
        {
          id: 6,
          imgUrl: "/static/goods/山竹.png",
          name: "泰国进口山竹5A级",
          tag: "果汁饱满 汁水充盈",
          price: 25.3,
          unit: "斤",
        },
      ],
      navbarBackground: "transparent", // 导航栏背景颜色
      navbarHeight: 0, // 导航栏高度
      activityZoneData: [
        // 活动区数据
        {
          title: "拼团好物",
          icon: "/static/icon/拼团好物.png",
        },
        {
          title: "乳品饮料",
          icon: "/static/icon/乳品饮料.png",
        },
        {
          title: "休闲零食",
          icon: "/static/icon/休闲零食.png",
        },
        {
          title: "粮油干货",
          icon: "/static/icon/粮油干货.png",
        },
        {
          title: "日化洗护",
          icon: "/static/icon/日化洗护.png",
        },
        {
          title: "限时秒杀",
          icon: "/static/icon/限时秒杀.png",
        },
        {
          title: "在线教育",
          icon: "/static/icon/在线教育.png",
        },
        {
          title: "逍遥旅游",
          icon: "/static/icon/逍遥旅游.png",
        },
      ],
    };
  },
  methods: {
    handleAddShoppingCart(goodsInfo) {
      // 添加购物车
      console.log("goodsInfo: ", goodsInfo);
      this.$store.dispatch("addShoppingCart", goodsInfo);
      console.log(this.$store.state.shoppingCart);
    },
  },
  onLoad() {
    this.navbarHeight = this.$refs.navbar.navigationBarHeight;
  },
  onPageScroll({ scrollTop }) {
    if (scrollTop !== 0) {
      this.navbarBackground = "#FF5B2D";
    } else {
      this.navbarBackground = "transparent";
    }

    this.showBackTop = scrollTop >= 300 ? true : false;
  },
  onReachBottom() {
    if (this.goodsNumber !== 100) {
      this.goodsNumber += 10;
    }
  },
  mounted() {
    setInterval(() => {
      const date = new Date();
      this.countdown.h =
        date.getHours() < 10
          ? "0" + date.getHours()
          : (this.countdown.h = date.getHours());

      this.countdown.m =
        date.getMinutes() < 10
          ? "0" + date.getMinutes()
          : (this.countdown.m = date.getMinutes());

      this.countdown.s =
        date.getSeconds() < 10
          ? "0" + date.getSeconds()
          : (this.countdown.s = date.getSeconds());
    }, 1000);
  },
  computed: {
    imgList() {
      const arr = [];
      for (let i = 1; i <= 5; i++) {
        arr.push(`/static/index/banner(${i}).png`);
      }
      return arr;
    },
    loadingText() {
      return this.goodsNumber === 100 ? "没有更多咯~" : "正在努力加载中...";
    },
  },
};
</script>

<style lang="scss" scoped>
.background {
  width: 100%;
  height: 488rpx;
  background: url("/static/index/background-index.png") no-repeat;
  background-size: 100% 488rpx;
  position: absolute;
  top: 0;
  z-index: 1;
}

// 横幅区域
.bannerContainer {
  position: relative;
  z-index: 99;

  // 搜索框
  .searchContainer {
    width: 710rpx;
    height: 60rpx;
    background-color: red;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40rpx;
    background-color: rgba(255, 255, 255, 0.3);

    image {
      width: 35rpx;
      height: 35rpx;
    }

    input {
      width: 600rpx;
      padding: 0 20rpx;
      height: 100%;
      color: #fff;
      font-size: 26rpx;
    }
  }

  // 轮播图
  .swiperContainer {
    width: 702rpx;
    height: 310rpx;
    margin: 24rpx auto;
    border-radius: 10rpx;

    .swiper {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

// 活动区
.activityZone {
  width: 720rpx;
  height: 520rpx;
  margin: 6rpx auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;

  .activeItem {
    width: 160rpx;
    text-align: center;
    display: flex;
    flex-direction: column;
    font-size: 28rpx;

    image {
      width: 100rpx;
      height: 100rpx;
      margin: 0 auto;
      margin-bottom: 14rpx;
    }
  }

  // 活动横幅
  .activeBanner {
    width: 672rpx;
    height: 136rpx;
    margin-top: 5rpx;

    image {
      width: 100%;
      height: 100%;
      animation: shadow 2s infinite linear;

      @keyframes shadow {
        0% {
          filter: drop-shadow(0 0 10px rgba(253, 87, 9, 0.3));
        }

        25% {
          filter: drop-shadow(0 0 10px rgba(253, 87, 9, 0.5));
        }

        50% {
          filter: drop-shadow(0 0 10px rgba(253, 87, 9, 0.8));
        }

        75% {
          filter: drop-shadow(0 0 10px rgba(253, 87, 9, 0.5));
        }

        100% {
          filter: drop-shadow(0 0 10px rgba(253, 87, 9, 0.3));
        }
      }
    }
  }
}

// 秒杀专区
.secondKillZone {
  width: 702rpx;
  margin: 20rpx auto;

  // 标题部分
  .skTitle {
    width: 100%;
    height: 50rpx;
    text-indent: 12rpx;
    border-left: 8rpx solid $main-color;
    font-size: 34rpx;
    display: flex;
    align-items: center;

    // 倒计时
    .countdown {
      height: 100%;
      display: flex;
      align-items: center;

      .separation {
        color: $main-color;
        margin-left: -10rpx;
      }

      view {
        width: 38rpx;
        height: 38rpx;
        line-height: 38rpx;
        text-align: center;
        background-color: $main-color;
        font-size: 20rpx;
        color: #fff;
        margin: 0 6rpx;

        text {
          margin-left: -10rpx;
        }
      }
    }
  }

  // 秒杀商品
  .instantGoods {
    width: 702rpx;
    height: 209rpx;
    background-color: #fff;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    margin: 32rpx auto;
    display: flex;
    align-items: center;
    justify-content: space-around;

    // 商品封面
    .goodsCover {
      width: 213rpx;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .container {
        width: 185rpx;
        height: 185rpx;
        background-color: #f3f3f3;
        text-align: center;
        position: relative;

        image {
          width: 164rpx;
          height: 164rpx;
        }

        .desc {
          width: 100%;
          height: 27rpx;
          line-height: 27rpx;
          text-align: center;
          background-color: #06b272;
          position: absolute;
          left: 0;
          bottom: 0;
          font-size: 20rpx;
          color: #fff;
        }
      }
    }

    .rightContent {
      width: 480rpx;
      height: 190rpx;

      // 商品名称
      .goodsName {
        width: 85%;
        height: 45rpx;
        line-height: 45rpx;
        font-size: 30rpx;
        color: #333;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      // 商品数量
      .goodsNumber {
        width: 120rpx;
        height: 36rpx;
        line-height: 36rpx;
        color: #999;
        font-size: 24rpx;
      }

      // 商品特权
      .commodityPrivilege {
        width: 85%;
        height: 30px;
        display: flex;
        align-items: center;

        view {
          padding: 2rpx 6rpx;
          font-size: 20rpx;
          color: $main-color;
          border-radius: 12rpx;
          border: 1rpx solid $main-color;
          margin-left: 18rpx;

          &:first-child {
            margin-left: 0;
          }
        }
      }

      // 购买
      .buy {
        width: 95%;
        height: 55rpx;
        line-height: 55rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .price {
          width: 50%;
          height: 100%;

          .currentPrice {
            color: $main-color;
            font-size: 36rpx;
          }

          .originalPrice {
            color: #999;
            font-size: 22rpx;
            margin-left: 18rpx;
            text-decoration-line: line-through;
          }
        }

        .buyButton {
          width: 50%;
          height: 100%;
          position: relative;

          button {
            width: 160rpx;
            height: 50rpx;
            line-height: 50rpx;
            text-align: center;
            font-size: 26rpx;
            color: #fff;
            background-color: $main-color;
            position: absolute;
            right: 0;
            top: 0;
            border-radius: 25rpx;
          }
        }
      }
    }
  }

  // 查看更多
  .more {
    width: 702rpx;
    height: 35rpx;
    line-height: 35rpx;
    text-align: center;
    color: $main-color;
    font-size: 23rpx;
    text-decoration-line: underline;
  }
}

// 商品列表
.goodsList {
  width: 702rpx;
  margin: 10rpx auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

  .loading {
    width: 702rpx;
    height: 36rpx;
    line-height: 36rpx;
    font-size: 24rpx;
    color: #999;
    text-align: center;
    margin: 20rpx 0;
  }
}
</style>
